
<template>
  <el-cascader
    v-model="areaValueList"
    style="width: 100%;"
    :disabled="disabled"
    :props="areaTreeOptions"
    @change="handleChange"
  />
</template>
<script>
export default {
  name: 'AreaCascader',
  props: {
    areaValues: {
      type: Array,
      default() {
        return []
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      areaTree: [],
      areaTreeOptions: {
        label: 'areaName',
        value: 'geoAreaId',
        lazy: true,
        lazyLoad: this.handleLazyLoadLocation
      }
    }
  },
  computed: {
    areaValueList: {
      get() {
        return this.areaValues
      },
      set(val) {
        this.$emit('update:areaValues', val)
      }
    }
  },
  created() {
  },
  methods: {
    handleLazyLoadLocation(node, resolve) {
      setTimeout(async() => {
        const areaList = await this.getLocationList(node.value)
        if (node.level === 2) {
          areaList.forEach(item => {
            item.leaf = true
          })
        }
        if (areaList.length === 0) {
          const areaIds = []
          if (node.parent) {
            areaIds.push(node.parent.data.geoAreaId)
          }
          areaIds.push(node.data.geoAreaId)
          this.areaValueList = areaIds
        }
        resolve(areaList)
      }, 100)
    },
    async getLocationList(parentId = 0) {
      try {
        const getLocationListResult = await this.$api.getLocationList({ parentId, page: 1, pageSize: 999 })
        return getLocationListResult.list
      } catch (err) {
        console.error(err)
      }
    },
    handleChange(event) {
      console.log(event)
    }
  }
}
</script>
